import React from 'react';
import { observer } from 'mobx-react';
import { View } from 'react-native';
import moment from 'moment';
import _ from 'lodash';
import Form from '../../../components/Form';
import Spin from '../../../components/spin';

const t = Form.t;

const options = {
  order: [
    'insuranceCompanyId',
    'insuranceProductId',
    'applicantId',
    'insuredId',
    'underWritingDate',
    'premiumPaymentYears',
    'insurancePeriod',
    'premium',
    'insuredAmount',
  ],
  fields: {
    insuranceCompanyId: {
      label: '承保机构',
      error: '必填项',
    },
    insuranceProductId: {
      label: '保险产品',
      error: '必填项',
    },
    applicantId: {
      label: '投保人',
      error: '必填项',
    },
    insuredId: {
      label: '被保人',
      error: '必填项',
    },
    underWritingDate: {
      label: '承保日期',
      error: '必填项',
      placeholder: '请选择承保日期',
      config: {
        format: date => moment(date).format('YYYY-MM-DD'),
        defaultValueText: '请选择承保日期'
      },
      maximumDate: new Date(),
      minimumDate: new Date('1950-01-01'),
      mode: 'date'
    },
    premiumPaymentYears: {
      label: '缴费年限(年)',
      placeholder: '请输入保险期限',
      error: '必填项, 大于0且小于100的整数',
    },
    insurancePeriod: {
      label: '保险期限(年)',
      placeholder: '请输入保险期限',
      error: '必填项, 小于100的非负整数',
      help: '如果是终生请填 0',
    },
    premium: {
      label: '保费(元/年)',
      placeholder: '请输入保费金额',
      error: '必填项, 大于0且小于100000的整数',
    },
    insuredAmount: {
      label: '保额(万元)',
      placeholder: '请输入保额',
      error: '必填项, 大于0且小于1000的整数',
    },
  }
};
const memberData = (data) => {
  const res = {};
  _.forEach(data, (d) => {
    res[d.customerFamilyMemberId] = `${d.name}(${d.relationTypeName})`;
  })
  return res;
}
const Member = (data) => t.enums(memberData(data));
const NumberType = (min, max) => t.refinement(t.Number, (number) => {
  return _.isInteger(number) && number > min && number <= max
})
@observer
class MyForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      options,
      showProducts: false,
      values: {},
      initialValue: props.policy.current || {},
      type: {
        insuranceCompanyId: t.enums(props.policy.baseData_ins || {}),
        insuranceProductId: t.enums({}),
        applicantId: Member(props.members.data || {}),
        insuredId: Member(props.members.data || {}),
        underWritingDate: t.Date,
        premiumPaymentYears: NumberType(0, 100),
        insurancePeriod: NumberType(-1, 200),
        premium: NumberType(0, 100000),
        insuredAmount: NumberType(0, 1000),
      }
    }
  }
  onChange = (values) => {
    const type = _.cloneDeep(this.state.type);
    const { initialValue } = this.state
    if (values.insuranceCompanyId) {
      type.insuranceProductId = t.enums(this.props.policy.baseData_prod[values.insuranceCompanyId] || {});
      if (initialValue.insuranceCompanyId !== values.insuranceCompanyId) {
        values.insuranceProductId = ''
      }
    } else {
      delete type.insuranceProductId;
    }
    const state = {type};
    if(values.insuranceCompanyId !== initialValue.insuranceCompanyId
      || values.insuranceProductId !== initialValue.insuranceProductId) {
        state.initialValue = values;
        this.setState(state);
      }
  }
  componentWillReact() {
    if (!_.isEmpty(this.props.policy.baseData_ins) && !this.state.typeStatus) {
      const { type } = this.state;
      type.insuranceCompanyId = t.enums(this.props.policy.baseData_ins || {});
      this.setState({
        type,
        typeStatus: true
      })
    }
  }
  render() {
    const policy = this.props.policy.current || {};
    if (this.props.id && _.isEmpty(policy) || _.isEmpty(this.props.policy.baseData_ins)) {
      return null;
    }
    const extraValue = { customerId: this.props.customerId };
    if (this.props.id) {
      extraValue.policyId = this.props.id;
    }
    const { underWritingDate, ...other } = this.state.initialValue;
    const initialValue = {
      underWritingDate: (underWritingDate && new Date(underWritingDate)) || new Date(),
      ...other,
    };
    return (
      <Spin visible={this.props.policy.pending}>
        <View style={{ flex: 1 }}>
          <Form
            {...this.props}
            initialValue={initialValue}
            formType={this.state.type}
            options={this.state.options}
            extraValue={extraValue}
            onChange={this.onChange}
          />
        </View>
      </Spin>
    );
  }
}

export default MyForm;
